{include file='common/_meta' /}
<body>
<div class="container">

	{if session('user_type') != 'admin'}

	<div class="layui-row">
        <div class="layui-col-md12 breadcrumb">
    		<span class="layui-breadcrumb">
    			<a><cite>报表管理</cite></a>
    			<a><cite>月报表</cite></a>
    		</span>
        </div>
    </div>

	{/if}

    <div class="layui-row">

    	<form class="layui-form" id="form-article" action="" lay-filter="" style="padding-top: 15px;">

            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">报表时间：</label>
                    <div class="layui-input-block">
                        <input type="text" name="seletime" value="" autocomplete="off" placeholder="" class="layui-input" id="seletime">
                    </div>
                </div>
            </div>
            {if (session('user_type') == 'admin')}
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户：</label>
                    <div class="layui-input-block">
                        <select name="cid" lay-search>
                            <option value="">请选择</option>
                            {volist name='cids' id='c'}
                            <option value="{$c.channel_id}"> {$c.company_name}({$c.channel_id})</option>
                            {/volist}
                        </select>
                    </div>
                </div>
            </div>
            {/if}
            <div class="layui-col-sm4">
                <div class="layui-input-block">
                    <button class="layui-btn custom-sm-fluid" lay-submit lay-filter="custom-search">查询</button>
                    &nbsp;
			      	<button class="layui-btn custom-sm-fluid" onclick="daochu()">导出</button>
                </div>
            </div>
            <div class="layui-col-sm4">
                <div class="layui-input-block">
			    </div>
    		</div>
            <div class="layui-col-sm12">
            </div>

    	</form>

    </div>

    <div class="layui-fluid" style="background-color: #fff;overflow-x: hidden;margin-top: 10px;">

    	<div class="layui-row">

			<table class="layui-table" lay-even lay-skin="line" lay-size="lg">
				<tbody>
				   <tr>
				     	<td><h3>用户ID：{$channelinfo.channel_id}</h3></td>
				     	<td><h3>公司名称：{$channelinfo.company_name}</h3></td>
				   </tr>
				</tbody>
			</table>

    	</div>

        <div class="layui-row">

			<ul class="layui-timeline">
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					<div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">发送量统计</h3>
					<table class="layui-table" lay-skin="line">
					    <tbody>
                            <tr>
                                <td>短信总量：{$channelinfo.sms_all}</td>
                                <td>成功数：{$channelinfo.sms_success}</td>
                            </tr>
                            <tr>
                                <td>失败数：{$channelinfo.sms_faild}</td>
                                <td>发送中：{$channelinfo.sms_sending}</td>
                            </tr>
					    </tbody>
					</table>

				</li>
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					<div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">饼状图</h3>

					<div class="layui-row">
			    		<div class="layui-col-sm12 layui-col-md6">
							<div id="error_main" style="width: 100%;height:300px;"></div>
			    		</div>
					</div>
				</li>
				<li class="layui-timeline-item">

				</li>
			</ul>

        </div>
    </div>
</div>
{include file="common/_footer"}
<script type="text/javascript" src="{:$Think.config.__STATIC__}/js/echarts.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">

    $('select[name=cid]').val('{$cid}');
    layui.use(['layer', 'form', 'jquery', 'element', 'laydate'], function() {

        var layer   = layui.layer;
        var form    = layui.form;
        var $       = layui.jquery;
        var element = layui.element;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#seletime'
            ,type: 'month'
            ,value: '{$seletime}'
        });

      	// 监听搜索事件
        form.on('submit(custom-search)', function(data) {

          	layer.load(2,{shade: [0.8, '#393D49']});
        });

    });

    function daochu()
    {
        var str=$("#form-article").serialize();
        window.open("{:url('OrderReport/indexYueDao')}?"+str);
    }

    //饼状图,初始化echarts实例
    var error_main = echarts.init(document.getElementById('error_main'));
    bingzInit(error_main,
            {
                "titleName":"短信状态分布",
                "dataName":["成功","失败","发送中"],
                "dataValue":['{$channelinfo.sms_success}','{$channelinfo.sms_faild}','{$channelinfo.sms_sending}']
            });
        /*饼状图*****************************************************************/
    //初始化饼状图
    function bingzInit(obj,info)
    {
        var legendSelected = {};
        var seriesData = [];
        var dataName = info.dataName;
        var dataValue = info.dataValue;

        for (var i in dataName) {
            legendSelected[dataName[i]] = true;
            seriesData.push({
                name: dataName[i],
                value: dataValue[i]
            });
        }
        option = {
            // 全局调色盘。
            color: ['#009688','#c23531','#B3B3B3', '#61a0a8', '#d48265', '#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            title : {
                text: info.titleName,
                subtext: '饼状分布',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: dataName,

                selected: legendSelected
            },
            series : [
                {
                    name: '短信',
                    type: 'pie',
                    radius : '55%',
                    label: {
                        normal: {
                            formatter: '{b}({d}%)',
                        }
                    },
                    center: ['40%', '50%'],
                    data:   seriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 填入数据
        obj.setOption(option);

    }

</script>

<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>